<template>
  <div class="index-left">
    <div class="left-top">
      <span class="el-icon-s-custom"></span>
      <div>
        user
        <img :src="userHref" alt />
      </div>
    </div>
    <div class="left-middle"></div>
    <div class="left-bottom">
      <div>
        <span>Transactions</span>
        <el-dropdown>
          <span class="el-dropdown-link">
            下拉菜单
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
            <el-dropdown-item disabled>双皮奶</el-dropdown-item>
            <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <ul class="list">
        <li>
            <img :src="list1" alt />
            <span>Dribble Pro Plan</span>
            <span>-$100</span>
        </li>
        <li>
            <img :src="list1" alt />
            <span>Dribble Pro Plan</span>
            <span>-$100</span>
        </li>
        <li>
            <img :src="list1" alt />
            <span>Dribble Pro Plan</span>
            <span>-$100</span>
        </li>
      </ul>
       <el-button round>
           <span>Transfer Money</span>
           <em class="el-icon-right"></em>
       </el-button>
       <div class="tubiao"><i class="el-icon-folder-opened"></i></div>
    </div>
  </div>
</template>
<script>
import userHref from '../../public/images/index/user.png'
import list1 from '../../public/images/index/list1.png'
export default {
  data () {
    return {
      userHref,
      list1
    }
  }
}
</script>
<style lang="scss">
.index-left {
  height: 750px;
  border-radius: 6px;
  box-shadow: -10px 0px 10px rgba($color: #ccc, $alpha: 0.6);
  padding: 15px 20px;
  position: relative;
  //   顶部样式
  .left-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 20px;
    }
    div:first-of-type {
      font-size: 12px;
    }
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      padding-left: 5px;
    }
  }
  //   中部样式
  .left-middle {
    width: 100%;
    height: 250px;
    background-color: skyblue;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  //   底部样式
  .left-bottom {
    div, .list>li {
        display: flex;
        justify-content: space-between;
        align-items: center;
      span {
        font-size: 18px;
        color: #ccc;
      }
      .el-dropdown-link {
        cursor: pointer;
        color: #ccc;
        font-size: 16px;
      }
      .el-icon-arrow-down {
        font-size: 16px;
      }
    }
    .list{
        margin: 0;
        padding: 0;
        li{
            list-style: none;
            margin-top: 20px;
        }
        img{
          width: 60px;
          height: 60px;
      }
      span:nth-of-type(1){
          color: #000;
      }
      span:nth-of-type(2){
          color: red;
      }
    }
  }
    .el-button{
        width: 300px;
        background-color: red;
        position: relative;
        bottom: -13px;
        right: -45px;
        border: 0;
        span{
            font-size: 20px;
            color: #fff;
            float: left;
        }
        em{
            position: absolute;
            top: 5px;
            right: 15px;
            font-size: 30px;
        }
    }
    .tubiao{
        width: 50px;
        height: 50px;
        background-color: #0E809A;
        position: absolute;
        bottom: 10px;
        right: 10px;
        border-radius: 50%;
        padding-left: 10px;
       i{
           font-size: 34px;
           font-style: normal;
       }
    }
}
</style>
